<template>
  <div class="search">
    <div class="search-top">
      <p class="btn-new" @click="getBack">
        <img src="../assets/Return.png" alt="" />
      </p>
      <van-search
        show-action
        v-model="value"
        left="地址"
        placeholder="请输入搜索关键词"
        shape="round"
        @input="getSearchData(value)"
      >
        <template #action>
          <div @click="onSearch(value)" class="btn-search">搜索</div>
        </template>
      </van-search>
    </div>

    <div class="search-hotword" v-if="value.length > 0">
      <div class="search-top-title">搜索"{{value}}"</div>
      <div class="search-test">
        <ul
          class="test-list"
          v-for="(inpVal, num) in searchItem"
          :key="num"
          @click="onSearch(inpVal)"
        >
        <img src="../assets/book-search.png" alt="">
          <li class="test-item">{{ inpVal.text }}</li>
        </ul>
      </div>
    </div>
<div v-else>
    <div class="hot-search">
      <div class="nav-title">热门搜索</div>
      <div class="nav-item-box">
        <div class="nav-item" v-for="(v1,i1) in hotWord" :key="i1" @click="gotoDetail({id:v1.id,title:v1.title})"><span class="num" :class=" [i1+1 == 1?  'active1':i1+1==2? 'active2':i1+1==3? 'active3':'active'] ">{{i1+1}}</span>{{v1.name}}</div>
        
      </div>
    </div>

    <div class="sousuo-box" >
      <div class="nav-title2">
        <div class="nav-text">最近搜索</div>
        <div class="nav-img" @click="deleteData">
          <img src="../assets/removeAll.png" alt=""  />
        </div>
      </div>
      <div class="nav-item-box" v-if="sousuoLishi.length > 0">
        <div class="nav-item2" v-for="(v2, i2) in sousuoLishi" :key="i2" @click="onSearch(v2)">
          <van-icon name="search" />
          {{v2}}
        </div>
        
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      value: "",
      sousuoLishi:[],
      hotWord:[],
      searchItem: [],
    };
  },
  created() {
      this.getLiShi();
      this.getHotData();
      
  },
  methods: {
     gotoDetail(obj) {
      // console.log(title);
      this.$router.push({name:"BookDetail",params:{id:obj.id,title:obj.title}})
    },
    getBack() {
      this.$router.go(-1);
    },
    getLiShi() {
      if (!localStorage.getItem("word")) {
        this.sousuoLishi = [];
      } else {
        let result = Array.from(new Set(JSON.parse(localStorage.getItem("word"))));
        this.sousuoLishi = result;
      }
    },
    onSearch(value) {
      if (value == "") {
        // console.log("请输入要搜索的内容");
        return;
      }else{

        this.$router.push({ name: "changeinp", params: { value } });
  
        var localChatData = localStorage.getItem("word");
  
        if (!localChatData) {
          localChatData = [];
        } else {
          localChatData = JSON.parse(localChatData);
        }
        localChatData.unshift(value);
        localStorage.setItem("word", JSON.stringify(localChatData));
      }
    },
    getHotData() {
      this.axios({
        method: "get",
        url: "search/getHotWords",
      })
        .then((result) => {
          // console.log('热词',result);
        //   let arr = result.data.data;
        //   let num = 11;
        //   let newArr = [];

        //   // console.log(this.hotWord);
        //   for (let i = 0; i < num; i++) {
        //     let ran = Math.floor(Math.random() * arr.length);
        //     newArr.push(arr.splice(ran, 1)[0]);
        //   }
          this.hotWord = result.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteData() {
      sessionStorage.removeItem('word');
    },

    getSearchData(value) {
      this.axios({
        methods: "get",
        url: "search/searchHint?",
        params: {
          search:value
        },
      })
        .then((result) => {
          let arr = result.data.words.w;
          console.log(arr);
          let inpVal = value
          this.searchItem = arr.filter((item) => {
            if (item.text.includes(inpVal)) {
              return item.text;
            }
          });
          // console.log(this.searchItem);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.btn-search {
  color: #e4393c;
}
.search-top {
  background-color: #fff;
  .btn-new {
    display: inline-block;
    float: left;
    font-size: 24px;
    margin-top: 15px;
    margin-left: 5px;
    color: #ccc;
    height: 10px;
    img {
      width: 20px;
    }
  }
}
.hot-search {
  margin-top: 10px;
  .nav-title {
    font-size: 13px;
    padding: 0 10px;
    color: dimgray;
  }
  .nav-item-box {
    margin-top: 5px;
    padding: 0 20px;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
  }
  .nav-item {
    display: inline-block;
    padding: 2px 3px;
    border-radius: 10px;
    margin-right: 5px;
    margin-top: 5px;
    color: #000;
    width: 120px;
  }
  .num {
    display: inline-block;
    width: 16px;
    text-align: center;
    color: #fff;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    margin-right: 8px;
  }
  .active{
    background-color: #ccc;
  }
  .active1 {
    background-color: red;
  }
  .active2 {
    background-color: DarkOrange;
  }
  .active3 {
    background-color: Gold;
  }
}
.sousuo-box {
  margin-top: 25px;
  .nav-title2 {
    display: flex;
    justify-content: space-between;
    .nav-text {
      font-size: 13px;
      padding: 0 10px;
      color: dimgray;
    }
    .nav-img {
      padding-right: 10px;
      img {
        width: 20px;
        height: 20px;
      }
    }
  }
  .nav-item-box {
    margin-top: 5px;
    padding: 0 20px;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    .nav-item2 {
      background-color: #ccc;
      padding: 2px 10px;
      border-radius: 10px;
      margin-right: 5px;
      margin-top: 5px;
    }
  }
}

.search-top-title {
  // padding: 0 10px;
  font-size: 14px;
  border-bottom: 1px solid whitesmoke;
}
.test-list {
  padding: 5px 0px;
  border-bottom: 1px solid Gainsboro;
  img {
    width: 16px;
    // line-height: 32.6px;
  }
  li {
    display: inline-block;
    font-size: 14px;
    color: dimgray;
    margin-left: 5px;
  }
}
.search-hotword{
  padding: 0px 5px;
}
</style>